<template>
    <div>
      <el-form :inline="true" :model="searchShopKillRequest" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input v-model="searchShopKillRequest.shopName" placeholder="商品名称"></el-input>
        </el-form-item>
        <el-form-item label="活动名称">
          <el-input v-model="searchShopKillRequest.title" placeholder="活动名称"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="searchShopKillRequest.dateTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="秒杀的这个日期的时间范围">
          <el-select v-model="searchShopKillRequest.timeScope" placeholder="时间范围" >
            <el-option v-for="timeScope in timeScopeList" :label="timeScope" :value="timeScope" :key="timeScope"></el-option>
          </el-select>
        </el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
      </el-form>
      <el-table
        :data="pageResult.list" border style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="150">
          <template slot-scope="scope">
            {{scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column prop="promotionTitle" label="活动标题" width="150" />
        <el-table-column prop="shopName" label="商品名称" width="150" />
        <el-table-column  label="商品图⽚" width="150">
          <template slot-scope="scope">
            <el-image :src="scope.row.shopImage"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="shopPrice" label="原价格" width="150" />
        <el-table-column prop="stockCount" label="剩余库存数" width="150" />
        <el-table-column prop="seckillPrice" label="秒杀价格" width="150" />
        <el-table-column prop="seckillCount" label="秒杀总量" width="150" />
        <el-table-column prop="seckillLimit" label="每人限购数量" width="150" />
        <el-table-column prop="startTime" label="开始时间" width="150" />
        <el-table-column prop="seckillCount" label="秒杀总量" width="150" />
        <el-table-column prop="endTime" label="结束时间" width="150" />
        <el-table-column prop="status" label="状态" width="150" />
        <el-table-column prop="createTime" label="创建时间" width="150" />
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="delClick(scope.row.id)" type="text" size="small">删除</el-button>
            <el-button type="text" size="small" @click="updateClick(scope.row.id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--添加活动商品对话框-->
      <el-dialog
        title="修改活动商品"
        :visible.sync="updateStatus"
        width="500px">
        <el-form :inline="true" :model="shopPromotinInfo" class="demo-form-inline">
          <el-form-item label="商品图⽚" prop="shopImage">
            <el-image :src="shopPromotinInfo.shopImage"></el-image>
          </el-form-item>
          <el-form-item label="原价格" prop="shopPrice">
            <el-input readonly v-model="shopPromotinInfo.shopPrice"></el-input>
          </el-form-item>
          <el-form-item label="秒杀价格" prop="seckillPrice">
            <el-input-number v-model="shopPromotinInfo.seckillPrice" :precision="2" :step="0.1" ></el-input-number>
          </el-form-item>
          <el-form-item label="秒杀总量" prop="name">
            <el-input-number v-model="shopPromotinInfo.seckillCount"  :min="1" :max="shopPromotinInfo.shopStock" label="秒杀总量"></el-input-number>
          </el-form-item>
          <el-form-item label="每人限购数量" prop="name">
            <el-input-number v-model="shopPromotinInfo.seckillLimit" :precision="2" :step="1.0" ></el-input-number>
          </el-form-item>
          <el-form-item label="活动时间">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="shopPromotinInfo.killDate" ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="秒杀的这个日期的时间范围">
            <el-select v-model="shopPromotinInfo.timeScope" placeholder="时间范围" >
              <el-option v-for="timeScope in timeScopeList" :label="timeScope" :value="timeScope" :key="timeScope"></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="updateSHopPromotionButton()">提交</el-button>
        </el-form>
      </el-dialog>

    </div>
</template>

<script>
import { selectShopPromotion, selectOneById, updateShopPromotion, deleteOneById } from '@/api/shopKill/shopKill'
export default {
  data() {
    return {
      pageResult : {
        list: [],
        total: 0
      },
      searchShopKillRequest: {
        shopName: '',
        title: '',
        dateTime: null,
        timeScope: '',
        status: null,
        pageNum: 1,
        pageSize: 10
      },
      timeScopeList: [
        '0-2','2-4','4-6','6-8','8-10','10-12','12-14','14-16','16-18','18-20','20-22','22-24'
      ],
      shopPromotinInfo: {},
      updateStatus: false
    }
  },
  created() {
    this.search()
  },
  methods: {
    search() {
      selectShopPromotion(this.searchShopKillRequest).then(response => {
          this.pageResult = response.data
      })
    },
    // 修改按钮
    updateClick(id) {
      selectOneById(id).then(response => {
          if(response.code != 200) {
              this.$message.error(response.msg)
              return;
            }
          this.shopPromotinInfo = response.data
          this.updateStatus = true
      })
    },
    // 修改秒杀商品信息
    updateSHopPromotionButton() {
      updateShopPromotion(this.shopPromotinInfo).then(response => {
         if(response.code != 200) {
           this.$message.error(response.msg)
           return;
         }
         this.search();
        this.updateStatus = false
      })
    },
    // 删除按钮
    delClick(id) {
      this.$modal.confirm('是否确认删除活动编号为"' + id + '"的数据项？').then(function() {
        return deleteOneById(id);
      }).then(() => {
        this.search();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    }
  }
}
</script>

<style scoped>
</style>
